/**
 * 输入框组件SSR导出处理
 * 使用Vue SSR渲染输入框组件为HTML
 */

import { createSSRExporter } from '@/utils/componentSSRExporter';
import InputComponent from './index.vue';

// 创建基于SSR的导出处理器
export default createSSRExporter(InputComponent, {
  // 自定义脚本生成
  scriptGenerator(component, options = {}) {
    const { id, props = {} } = component;
    const datas = props.datas || {};
    
    // 基础JS，为输入框添加交互功能
    let js = `
// 输入框 ${id} 初始化脚本
(function() {
  // 获取输入框元素
  const inputEl = document.getElementById("${id}").querySelector("input") || 
                  document.getElementById("${id}").querySelector("textarea");
  if (!inputEl) return;
  
  // 输入框初始值
  const initialValue = ${JSON.stringify(datas.value || '')};
  
  // 设置初始值
  inputEl.value = initialValue;
  
  // 输入事件处理
  inputEl.addEventListener('input', function(event) {
    const value = this.value;
    console.log("Input value changed:", value);
    
    // 执行用户定义的输入处理函数
    ${datas.inputHandler ? datas.inputHandler : '// 无用户定义的处理函数'}
  });`;
    
    // 如果是可清除的输入框，添加清除按钮功能
    if (datas.clearable) {
      js += `
  
  // 清除按钮功能
  const clearButton = inputEl.parentNode.querySelector('.el-input__clear');
  if (clearButton) {
    // 初始显示状态
    clearButton.style.display = inputEl.value ? 'inline' : 'none';
    
    // 根据输入内容显示/隐藏清除按钮
    inputEl.addEventListener('input', function() {
      clearButton.style.display = this.value ? 'inline' : 'none';
    });
    
    // 点击清除按钮清空输入
    clearButton.addEventListener('click', function() {
      inputEl.value = '';
      clearButton.style.display = 'none';
      inputEl.dispatchEvent(new Event('input'));
      inputEl.focus();
    });
  }`;
    }
    
    // 如果是密码框且支持显示密码
    if (datas.type === 'password' && datas.showPassword) {
      js += `
  
  // 密码显示/隐藏功能
  const passwordToggle = inputEl.parentNode.querySelector('.el-input__password');
  if (passwordToggle) {
    passwordToggle.addEventListener('click', function() {
      const type = inputEl.type;
      inputEl.type = type === 'password' ? 'text' : 'password';
      
      // 更新图标
      const icon = this.querySelector('i');
      if (icon) {
        icon.className = inputEl.type === 'password' 
          ? 'el-icon-view' 
          : 'el-icon-hide';
      }
    });
  }`;
    }
    
    // 如果有验证规则
    if (datas.required || datas.validator) {
      js += `
  
  // 字段验证
  inputEl.addEventListener('blur', function() {
    let isValid = true;
    let errorMessage = '';
    
    // 必填验证
    ${datas.required ? `
    if (!this.value || this.value.trim() === '') {
      isValid = false;
      errorMessage = '${datas.requiredMessage || '此字段为必填项'}';
    }` : '// 非必填字段'}
    
    // 自定义验证
    ${datas.validator ? `
    if (isValid) {
      try {
        const validatorFn = ${datas.validator};
        const result = validatorFn(this.value);
        if (result !== true) {
          isValid = false;
          errorMessage = result || '验证失败';
        }
      } catch (e) {
        console.error('验证器执行错误:', e);
      }
    }` : '// 无自定义验证'}
    
    // 显示/隐藏错误提示
    const errorEl = document.getElementById("${id}-error");
    if (errorEl) {
      errorEl.textContent = errorMessage;
      errorEl.style.display = isValid ? 'none' : 'block';
    }
    
    // 添加/移除验证状态样式
    inputEl.parentNode.classList.toggle('is-error', !isValid);
  });`;
    }
    
    js += `
})();`;
    
    return js;
  },
  
  // 自定义CSS生成
  cssGenerator(component, options = {}) {
    const { id, style = {} } = component;
    
    return `
/* 输入框 ${id} 的自定义样式 */
#${id} {
  position: relative;
  display: flex;
  flex-direction: column;
}

#${id} .input-label {
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

#${id} .required-mark {
  color: #f56c6c;
  margin-right: 4px;
}

#${id} .el-input,
#${id} .el-textarea {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}

#${id} .el-input__inner,
#${id} .el-textarea__inner {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  font-size: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#${id} .el-textarea__inner {
  height: auto;
  line-height: 1.5;
  padding: 5px 15px;
  resize: vertical;
}

#${id} .el-input__inner:focus,
#${id} .el-textarea__inner:focus {
  border-color: #409eff;
  outline: none;
}

#${id} .el-input.is-disabled .el-input__inner,
#${id} .el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}

#${id} .el-input__prefix,
#${id} .el-input__suffix {
  position: absolute;
  top: 0;
  height: 100%;
  color: #c0c4cc;
  text-align: center;
  transition: all 0.3s;
}

#${id} .el-input__prefix {
  left: 5px;
}

#${id} .el-input__suffix {
  right: 5px;
}

#${id} .el-input__clear {
  color: #c0c4cc;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

#${id} .el-input__clear:hover {
  color: #909399;
}

#${id}-error {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 2px;
  display: none;
}`;
  },
  
  // 导出所需的资源
  resources: [
    { type: 'css', path: './element-ui.css' }, // Element UI样式
    { type: 'css', path: './custom-input.css' } // 自定义输入框样式
  ]
}); 